<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            var demo = $("#demo")[0];
            var demo1 = $("#demo1")[0];
            var demo2 = $("#demo2")[0];
            var speed = 100;    //滚动速度值，值越大速度越慢
            var nnn = 200 / demo1.offsetWidth;
            for (i = 0; i < nnn; i++) {
                demo1.innerHTML += "<br />" + demo1.innerHTML
            }
            demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
            function Marquee() {
                if (demo2.offsetLeft - demo.scrollLeft <= 0)    //当滚动至demo1与demo2交界时
                    demo.scrollLeft -= demo1.offsetWidth    //demo跳到最顶端
                else {
                    demo.scrollLeft++
                }
            }

            var MyMar = setInterval(Marquee, speed);        //设置定时器
            demo.onmouseover = function () {
                clearInterval(MyMar)
            }    //鼠标经过时清除定时器达到滚动停止的目的
            demo.onmouseout = function () {
                MyMar = setInterval(Marquee, speed)
            }    //鼠标移开时重设定时器
        });
    </script>
</head>

<body>
    <div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;">
        <div id="demo1">
            HTML5是一个丰富的应用，可以给用户很多视觉上的享受！
        </div>
        <div id="demo2"></div>
    </div>
</body>

</html>